<script setup lang="ts">
import { ref } from 'vue'

const skills = ref([
  {
    category: '前端技术',
    items: [
      { name: 'HTML' },
      { name: 'CSS' },
      { name: 'JavaScript' },
      { name: 'Vue3' },
      { name: 'React' },
    ],
  },
  {
    category: '后端技术',
    items: [
      { name: 'Node.js' },
      { name: 'Express' },
      { name: 'NestJS' },
      { name: 'JWT认证' },
      { name: 'ORM' },
    ],
  },
  {
    category: '开发工具',
    items: [
      { name: 'TypeScript' },
      { name: 'Tailwind CSS' },
      { name: 'Docker' },
      { name: 'Nginx' },
      { name: 'Git' },
    ],
  },
  {
    category: '其他技能',
    items: [{ name: 'Java SE' }, { name: '8086汇编' }, { name: '服务器运维' }],
  },
])

const experiences = ref([
  {
    period: '现在',
    title: '全栈开发',
    description:
      '专注于使用Vue3和TypeScript进行前端开发，同时使用NestJS进行后端开发。熟悉组件库的使用和CSS框架如Tailwind CSS的应用。',
  },
  {
    period: '过去',
    title: '技术学习与积累',
    description:
      '系统学习了前端三剑客HTML、CSS、JavaScript，并深入学习了Vue3框架。同时学习了React框架，正在抽空深入学习。',
  },
  {
    period: '持续',
    title: '后端开发探索',
    description:
      '能够使用Node.js进行简单的后端开发，熟悉原生Node.js API和Express框架，更多使用NestJS进行后端开发，包括使用ORM包结合Docker连接数据库，实现JWT登录权限认证等。',
  },
  {
    period: '日常',
    title: '服务器运维',
    description: '有自购服务器的习惯，能进行一些简单的运维操作，比如配置Nginx等Web服务器。',
  },
])
</script>

<template>
  <div class="about-page">
    <div class="hero">
      <h1 class="title">关于我</h1>
      <p class="description">热爱技术，持续学习的全栈开发者</p>
    </div>

    <div class="content-section">
      <h2 class="section-title">技术栈</h2>
      <div class="skills-container">
        <div v-for="(skillGroup, index) in skills" :key="index" class="skill-group">
          <h3 class="skill-category">{{ skillGroup.category }}</h3>
          <div class="skills-grid">
            <div
              v-for="(skill, skillIndex) in skillGroup.items"
              :key="skillIndex"
              class="skill-tag"
            >
              <span class="skill-name">{{ skill.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">经历与专长</h2>
      <div class="timeline">
        <div v-for="(experience, index) in experiences" :key="index" class="timeline-item">
          <div class="timeline-marker">
            <div class="timeline-dot"></div>
          </div>
          <div class="timeline-content">
            <div class="timeline-period">{{ experience.period }}</div>
            <h3 class="timeline-title">{{ experience.title }}</h3>
            <p class="timeline-description">{{ experience.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">项目经验</h2>
      <div class="projects">
        <div class="project-card">
          <h3>前端开发</h3>
          <p>
            主要使用Vue3框架进行项目开发，结合TypeScript进行强类型开发。熟悉各种组件库的使用，以及CSS框架如Tailwind
            CSS的应用。
          </p>
        </div>
        <div class="project-card">
          <h3>后端开发</h3>
          <p>
            能够使用Node.js进行简单的后端开发，熟悉原生Node.js
            API以及Express框架，但更多使用NestJS来进行后端开发。
          </p>
        </div>
        <div class="project-card">
          <h3>全栈项目</h3>
          <p>
            使用ORM包结合Docker连接数据库，再使用JWT包等来实现登录权限认证等功能。有自购服务器的习惯，能进行一些简单的运维操作。
          </p>
        </div>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">学习态度</h2>
      <div class="learning-attitude">
        <div class="attitude-card">
          <div class="attitude-icon">🌱</div>
          <h3>持续学习</h3>
          <p>技术日新月异，保持学习的热情和习惯，不断探索新技术和最佳实践。</p>
        </div>
        <div class="attitude-card">
          <div class="attitude-icon">🔍</div>
          <h3>深入研究</h3>
          <p>不满足于表面的使用，喜欢深入理解技术原理和实现方式，知其然更知其所以然。</p>
        </div>
        <div class="attitude-card">
          <div class="attitude-icon">🛠️</div>
          <h3>实践应用</h3>
          <p>通过实际项目来巩固和应用所学知识，在实践中发现问题、解决问题。</p>
        </div>
        <div class="attitude-card">
          <div class="attitude-icon">🤝</div>
          <h3>分享交流</h3>
          <p>乐于分享技术经验和学习心得，通过交流与讨论共同进步。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.hero {
  text-align: center;
  padding: 4rem 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

.title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1f2937;
}

.description {
  font-size: 1.5rem;
  color: #4b5563;
}

.content-section {
  margin: 4rem 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
  color: #1f2937;
}

.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.skill-group {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1.5rem;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

.skill-category {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1f2937;
}

.skills-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.skill-tag {
  display: flex;
  align-items: center;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.skill-tag:hover {
  background-color: #e5e7eb;
}

.skill-name {
  font-weight: 500;
  color: #1f2937;
}

.timeline {
  position: relative;
  padding-left: 2rem;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 0.125rem;
  background-color: #e5e7eb;
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-marker {
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #4b5563;
}

.timeline-content {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1.5rem;
}

.timeline-period {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.5rem;
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.timeline-description {
  color: #4b5563;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

.project-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.project-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.project-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.project-card p {
  color: #4b5563;
}

.learning-attitude {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

.attitude-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s ease;
}

.attitude-card:hover {
  border-color: #d1d5db;
}

.attitude-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.attitude-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.attitude-card p {
  color: #4b5563;
}

@media (max-width: 768px) {
  .about-page {
    padding: 1rem;
  }

  .hero {
    padding: 2rem 0;
  }

  .title {
    font-size: 2rem;
  }

  .description {
    font-size: 1.2rem;
  }

  .skills-container {
    grid-template-columns: 1fr;
  }

  .projects {
    grid-template-columns: 1fr;
  }

  .learning-attitude {
    grid-template-columns: 1fr;
  }
}
</style>
